<template>
	<l-pull-refresh v-model="isEnabled1" :loading="loading1" @refresh="onRefresh1">
		<view class="demo-block">
			<text class="demo-block__title-text ultra">PullRefresh 下拉刷新</text>
			<text class="demo-block__desc-text">下拉刷新的交互操作，可用于页面或滚动组件。{{mode}}</text>
			<view class="demo-block__body">
				<view class="demo-block card">
					<view style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
						<text class="demo-block__title-text">{{ !mode ? '基于页面' : '滚动组件'}}</text>
						<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
							<text class="demo-block__title-text" style="padding-right: 10px;">切换为{{ mode ? '基于页面' : '滚动组件'}}</text>
							<switch :checked="mode" @change="change"></switch>
						</view>
					</view>
				</view>
				<view class="demo-block card" v-if="!mode">
					<view class="demo-block__body">
						<view>
							<view class="cell" v-for="item in list" :key="item">
								<text class="cell-text">{{item}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="demo-block card" v-if="mode">
					<text>{{isEnabled2}}</text>
					<view class="demo-block__body">
						<l-pull-refresh v-model="isEnabled2" :loading="loading2" @refresh="onRefresh2">
							<!-- <template #header="{status, progress}">
								<text  v-show="status == 'pulling'">下拉刷新{{progress.toFixed(2)}}</text>
								<text  v-show="status == 'ready'">松手刷新</text>
								<text  v-show="status == 'loading'">加载中...</text>
								<text  v-show="status == 'done'">刷新完成</text>
								<text  v-show="status == 'rebounding'">刷新完成</text>
							</template> -->
							<scroll-view style="height: 500px;" 
								scroll-y
								:throttle="false"
								@scroll="isEnabled2 = $event.detail.scrollTop == 0"
								@scrolltoupper="isEnabled2 = true">
								<view>
									<view class="cell" v-for="item in list" :key="item">
										<text class="cell-text">{{item}}</text>
									</view>
								</view>
							</scroll-view>
						</l-pull-refresh>
					</view>
				</view>
			</view>
		</view>
	</l-pull-refresh>
</template>

<script>
	
	export default {
		data() {
			return {
				mode: false,
				isEnabled1: true,
				isEnabled2: true,
				loading1: false,
				loading2: false,
				isEnabled: true,
				list: [],
			}
		},
		mounted() {
			for (let i = 0; i < 20; i++) {
				this.list.push(this.list.length + 1);
			}
		},
		methods: {
			change(e) {
				this.mode = e.detail.value
			},
			scroll(e) {
				this.isEnabled2 = e.detail.scrollTop == 0
			},
			onRefresh1() {
				this.loading1 = true
				setTimeout(() => {
					this.loading1 = false
					for (let i = 0; i < 20; i++) {
						this.list.push(this.list.length + 1);
					}
				}, 5000)
			},
			onRefresh2() {
				this.loading2 = true
				setTimeout(() => {
					this.loading2 = false
					for (let i = 0; i < 20; i++) {
						this.list.push(this.list.length + 1);
					}
				}, 5000)
			}
		},
		onPageScroll({scrollTop}) {
			this.isEnabled1.value = scrollTop == 0
		}
	}
</script>

<style lang="scss">
	.cell {
		display: flex;
		height: 50px;
		margin: 5px;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #eee
	}

	.demo-block {
		padding: 32px 0 0;

		// overflow: visible;
		&.card {
			background-color: white;
			padding: 30rpx;
			margin-bottom: 20rpx;
		}

		&__title {
			margin: 0;
			margin-top: 8px;

			&-text {
				color: rgba(0, 0, 0, 0.6);
				font-weight: 400;
				font-size: 14px;
				line-height: 16px;
				display: flex;
				margin-left: 5px;

				&.large {
					color: rgba(0, 0, 0, 0.9);
					font-size: 18px;
					font-weight: 700;
					line-height: 26px;
					margin-left: 20px;
				}

				&.ultra {
					color: rgba(0, 0, 0, 0.9);
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					padding-left: 15px;
				}
			}
		}

		&__desc-text {
			color: rgba(0, 0, 0, 0.6);
			margin: 8px 16px 0 0;
			font-size: 14px;
			line-height: 22px;
			margin-left: 20px;
		}

		&__body {
			margin: 16px 0;
			// overflow: visible;

			.demo-block {
				// margin-top: 0px;
				margin: 0;
				overflow: visible;
			}
		}
	}
</style>